<template>
  <el-dialog
    title="部门管理"
    :visible.sync="roleDialog"
    width="50%"
    :before-close="handleClose"
  >
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :expand-on-click-node="false"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="romgb">取 消</el-button>
      <el-button type="primary" @click="addrun">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    roleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      //   data: JSON.parse(JSON.stringify(data))
      data: [
        {
          id: 1,
          value: '山西省林业和草原有害生物检疫站',
          label: '山西省林业和草原有害生物检疫站',
          children: [
            {
              id: 4,
              value: '太原市检疫站',
              label: '太原市检疫站',
              children: [
                {
                  id: 9,
                  value: '小店区',
                  label: '小店区'
                },
                {
                  id: 10,
                  value: '小河区',
                  label: '小河区'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  created() {},
  methods: {
    handleClose(done) {
      this.$emit('update:roleDialog', false)
      // this.$refs.ruleForm.resetFields()
      // this.roleForm = {}
    },

    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex((d) => d.label === data.label)
      children.splice(index, 1)
    },
    // 取消
    romgb() {
      this.handleClose()
    },
    // 确认
    addrun() {
      this.handleClose()
    }
  }
}
</script>
